<template>
	<div>
			<div class="main_operation">
				<div class="operation_left" >
						<a-button class="mr10" v-if="routerShow($route,'column_add')" type="primary" @click="addBtn">添加</a-button>
						<!-- <a-button class="mr10" type="danger" @click="addBtn">批量删除</a-button> -->
				</div>
				<div class="operation_right">
					<a-input-search style="width: 280px;" v-model="formList.column_name" placeholder="请输入消息栏目名" @search="changeData" enterButton="查询" />
				</div>
			</div>
			<div class="main">
				<!-- :rowSelection="{ fixed: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
					<a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data"
						:rowKey="record => record.id"
						:scroll="{y: 500 }"
					>
						<template slot="action" slot-scope="text, record">
								<a-button v-if="routerShow($route,'column_update')" size="small" class="mr10" type="primary" @click="editBtn(record)">编辑</a-button>
								<a-button v-if="routerShow($route,'column_delete')" size="small" type="danger" @click="delBtn(record)">删除</a-button>
						</template>
				</a-table>
				<div class="pageBox">
					<a-pagination
						:total="dataLists.total"
						:showTotal="total => `共 ${total} 条数据`"
						:pageSize="dataLists.per_page"
						:defaultCurrent="1"
						@change="pageChange"
					/>
				</div>
				<!-- 添加编辑 -->
				<a-modal
					:destroyOnClose="true" :title="titleModel" :width="600"
					v-model="visible" :confirmLoading="confirmLoading"
					@ok="handleOk" @cancel="handleCancel">
					<a-form>
						<a-form-item required label="栏目名称:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
							<a-input v-model="formItem.column_name" placeholder="请输入栏目名称" />
						</a-form-item>
						<a-form-item required label="栏目说明:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
							<a-textarea v-model="formItem.explain" placeholder="请输入栏目说明" :autosize="{ minRows: 3, maxRows: 6 }" />
						</a-form-item>
					</a-form>
				</a-modal>
			</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from 'vuex';
		export default {
		name: "newsList",
		data(){
			return {
				/* 通用模块 */
					//列表
				tableLoad: false,//列表loading状态
				formList:{          //列表信息
					page: 1
				},
				selectedRowKeys: [],//勾选的id
				/* 通用模块end */
				/* 添加编辑 */
				titleModel: '',//标题
				visible: false,//窗口显示隐藏
				confirmLoading: false,//按钮loading状态
				formItem:{
					column_name: '',
					explain: '',
				},
				/* 添加编辑end */
			}
		},
		computed: {
			...mapState({
				Fields: state => state.columnList.Fields,
				dataLists: state => state.columnList.dataLists,
				requestCode: state => state.columnList.requestCode,
			}),
		},
		mounted() {
				this.changeData()
		},
		methods: {
			...mapActions({
				getLists: 'columnList/getLists',     //列表
				dataAdd: 'columnList/dataAdd',        //添加
				dataEdit: 'columnList/dataEdit',      //编辑
				dataDel: 'columnList/dataDel',        //删除
			}),
			/* 通用模块 */
				// 勾选
			onSelectChange(selectedRowKeys) {
				console.log('selectedRowKeys changed: ', selectedRowKeys);
				this.selectedRowKeys = selectedRowKeys
			},
				// 重新获取列表数据
			changeData(){
				this.tableLoad = true
				setTimeout(()=> {
					this.getLists(this.formList)
					this.tableLoad = false
				}, 800);
			},
				// 页码
			pageChange(page) {
				this.formList.page = page;
				this.getLists(this.formList)
			},
			/* 通用模块end */
			/* 添加编辑 */
				// 添加
			addBtn() {
				this.titleModel = '添加栏目'
				this.formItem = {
					column_name: '',
					explain: '',
				},
				this.visible = true
			},
				// 编辑
			editBtn(item) {
				this.titleModel = '编辑栏目'
				this.formItem.id = item.id
				this.formItem.column_name = item.column_name
				this.formItem.explain = item.explain
				this.visible = true
			},
				// 窗口确定
			handleOk() {
				this.confirmLoading = true;
				console.log(this.formItem)
				if(this.titleModel == '添加栏目') {
					this.formList.page = 1;
					this.dataAdd(this.formItem)
				} else {
					this.dataEdit(this.formItem)
				}
				setTimeout(() => {
					// console.log(this.requestCode);
					if(this.requestCode === 0) {
						this.visible = false;
						this.changeData()
					}
					this.confirmLoading = false;
				}, 1000);
			},
				// 窗口取消
			handleCancel() {
				this.visible = false
			},
			/* 添加编辑end */

			/* 删除 */
			delBtn(item) {
				let _this = this
				this.$confirm({
					title: `您确定要删除 ${item.column_name} 吗?`,
					content: `删除后将不可恢复,请仔细核对!`,
					okText: '是的',
					okType: 'danger',
					cancelText: '取消',
					onOk() {
						_this.dataDel(item.id)
						_this.changeData()
					},
				});
			},
		},
	}
</script>

<style scoped>

</style>
